【Day01】Leaflet從入門到微精通 - 創建屬於自己的地圖

leaflet

weijung0923 2024-09-23 22:50:53 ‧ 85 瀏覽

分享至

其實就是比照openlayers的旅程，我想把三套免費的地圖元件庫都玩一次，所以有興趣的也可以一起來動手看看喔

這是leaflet中的元件關係，你未來想要各種變化就從這邊找準沒錯，如果發現有特殊的沒有，那就可能需要另外找別人寫好的套件了
https://leafletjs.com/reference.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Basic Leaflet Map</title>
  <!-- 引入 Leaflet 的 CSS -->
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css" />
  <!-- 引入 Leaflet 的 JS -->
  <script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"></script>
  <style>
    html,
    body {
      padding: 0;
      margin: 0;
      height: 100vh;
      width: 100vw;
    }

    #map {
      height: 100%;
      /* 設置地圖容器的高度 */
      width: 100%;
      /* 設置地圖容器的寬度 */
    }
  </style>
</head>

<body>
  <!-- 地圖容器 -->
  <div id="map"></div>

  <script>
    // 初始化地圖並設置中心點和縮放級別
    const map = L.map('map').setView([51.505, -0.09], 13);

    // 加入 OpenStreetMap 底圖
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);

  </script>

</body>

</html>

補充

大Ｌ是什麼東西？

在 Leaflet 中，L 是一個全局對象（global object），它是 Leaflet 庫的命名空間。這個 L 對象包含了所有 Leaflet 的核心功能和類別，用來創建和管理地圖、圖層、標記、事件等。

哪邊找setView?

https://leafletjs.com/reference.html#map-other-methods

這邊就有說明Map的方法，裡面還有說明這個方法可以塞入什麼參數，都是option的，所以看你心情使用

從屬關係

addTo(map) 是 Leaflet 中 Layer 類別的方法。在 Leaflet 中，所有的圖層（例如標記、圖形、瓦片圖層等）都是 Layer 類的子類。這些圖層都有一個共同的 addTo() 方法，該方法用來將該圖層添加到指定的地圖實例中。所以未來想要知道是否可以使用該方法，只要確定他們的關係就可以了。